<template>
  <div class="class-list" :class="{'no-bg': !isNaN(type)}">
    <template v-if="!isWx">
    <div class="tabs pof t0 l0 w100 zi1" :style="{
    backgroundImage: `url(${bgs[type]})`
    }">
      <div class="tabs-box ovh">
        <img src="../../images/class/course_btn_all.png" class="all vat fr" @click="showAll = true">
        <van-tabs ref="tabs" v-model="activeTab" class="tab-list" :ellipsis="false" color="#328eff">
          <van-tab v-for="(item, i) in tabs" :key="item.id" :title="item.name"></van-tab>
        </van-tabs>
      </div>
    </div>
    <van-list v-model="loading"
              :finished="list.length >= total"
              finished-text="没有更多了"
              @load="loadmore">
      <ul class="list flex jcb fww">
        <li class="item por" v-for="(item, i) in list" @click="util.goToPlay(item)" :key="i">
          <vip-tip v-show="!userInfo.is_vip" :is-vip="!item.is_free" class="poa r0 t0"></vip-tip>
          <img :src="item.bigimg" class="bigimg w100 vam">
          <div class="title wot1">{{item.name}}</div>
          <div class="count">
            <img src="../../images/class/ico_guankanrenshu.png" class="eye vat">
            <span class="num">{{item.record_count}}</span>
          </div>
        </li>
        <li class="item por" v-if="list.length % 2"></li>
      </ul>
    </van-list>
    <van-actionsheet v-model="showAll" class="sheet">
      <div class="sheet-title tac poa w100">全部课程</div>
      <van-list v-model="tabsLoading"
                :finished="tabs.length >= tabsTotal"
                :offset="0"
                @load="tabsCurr ++">
        <ul class="c-list ova">
          <li @click="activeTab = i; showAll = false"
              class="c-item tac dib vam"
              :class="{active: i === activeTab}"
              v-for="(item, i) in tabs" :key="i">
            {{item.name}}
          </li>
        </ul>
      </van-list>
    </van-actionsheet>
    </template>
    <template v-else>
      <van-list class="list-inner" v-model="tabsLoading"
                :finished="tabs.length >= tabsTotal"
                :offset="10"
                finished-text="没有更多了!"
                @load="tabsCurr++" 
                v-show="tabsTotal">
        <course-card @btn-callback="btnCallBack"
                    @click-callback="itemCallBack"
                    :is-wx="isWx"
                    type="video" :item="item" v-for="(item, i) in tabs"
                    :key="i"></course-card>
      </van-list>
      <div class="tac" v-show="!tabsTotal">
        <van-loading class="loading" size="20px"></van-loading>
        <span style="color: rgb(201, 201, 201);fontSize:14px;">加载中...</span>
      </div>
    </template>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "ClassList",
    computed: {
      ...mapGetters(['userInfo','productInfo','isWx'])
    },
    data() {
      return {
        xid:'',
        type: '',
        activeTab: 0,
        showAll: false,
        tabs: [],
        list: [],
        numbers: {
          aoshu: 2,
          kexue: 1,
          zuowen: 57,
          yishu: 30,
          guoxue: 3,
          gushi: 4,
          gushici: 16
        },
        bgs: {
          aoshu: require('../../images/class/bg_banner_aoshu.png'),
          kexue: require('../../images/class/bg_banner_kexue.png'),
          zuowen: require('../../images/class/bg_banner_zuowen.png'),
          yishu: require('../../images/class/bg_banner_yishu.png'),
          guoxue: require('../../images/class/bg_banner_guoxue.png'),
          gushi: require('../../images/class/bg_banner_gushi.png'),
          gushici: require('../../images/class/bg_banner_gushici.png')
        },
        loading: false,
        total: 0,
        curr: 1,
        limits: 10,
        tabsLoading: false,
        tabsTotal: 0,
        tabsCurr: 1,
        tabsLimits: 10,
        cancelToken: null,

        // tabsNav: null,
        // scrollEnd: false,
        // scrollLeft: 0,
      }
    },
    created() {
      this.type = this.$route.params.type;
      this.xid = this.$route.params.xid;
      this.getTabsList().then(this.getList).catch(this.$err);
    },
    mounted() {
      // this.tabsNav = this.$refs.tabs.$el.getElementsByClassName('van-tabs__nav')[0];
      // this.tabsNav.addEventListener('scroll', this.scroll);
    },
    watch: {
      $route(val) {
        this.type = val.params.type;
        this.tabs = [];
        this.list = [];
        this.activeTab = 0;
        this.getTabsList().then(this.getList).catch(this.$err);
      },
      curr(val) {
        this.getList();
      },
      tabsCurr(val) {
        this.getTabsList();
      },
      activeTab(val) {
        this.cancelToken && this.cancelToken();
        this.list = [];
        this.total = 1;
        if (this.curr !== 1) {
          this.curr = 1;
        } else {
          this.getList();
        }
      }
    },
    methods: {
      scroll(e) {
        // let dom = e.target;
        // let {scrollLeft: sl, scrollWidth: sw, offsetWidth: ow} = dom;
        // if (sw - sl < ow * 1.5 && this.tabs.length < this.tabsTotal) {
        //   if (this.scrollEnd) return;
        //   this.scrollLeft = sl;
        //   this.scrollEnd = true;
        //   this.tabsCurr++;
        // }
      },

      loadmore() {
        if (!this.cancelToken) {
          this.curr++;
        }
      },

      getTabsList() {
        return this.http.$post('api/resource.subject/course_list', {
          curr: this.tabsCurr,
          limits: this.tabsLimits,
          uid:this.userInfo.uid,
          xueke_id:this.xid,
          subject_id: this.numbers[this.type] || this.type,
          product_id:this.productInfo.product_id
        }).then(res => {
          res.list.map(e => {
            e.name = e.name.split('：');
            e.name = e.name[1] || e.name[0];
            this.tabs.push(e);
          });
          this.tabsTotal = res.total;
          this.tabsLoading = false;
          // this.scrollEnd = false;
          // setTimeout(() => {
          //   this.tabsNav && (this.tabsNav.scrollLeft = this.scrollLeft);
          // }, 300)
        });
      },
      getList() {
        let tab = this.tabs[this.activeTab];
        let _this = this;
        if (!tab || !this.curr) return;
        this.http.$post('api/resource.resources/get_resources_list', {
          curr: this.curr,
          limits: this.limits,
          course_id: tab.id,
          product_id: 1,
        }, {
          cancelToken: new this.axios.CancelToken(r => {
            _this.cancelToken = r;
          })
        }).then(res => {
          this.cancelToken = null;
          this.list = [...this.list, ...res.list];
          this.total = res.total;
          this.loading = false;
        }).catch(err => {
          if (!this.axios.isCancel(err)) {
            this.$err(err);
          } else {
            console.log('cancel');
          }
        });
      },
      // 收藏
      btnCallBack(item,stop){
        stop();
        this.http.$post('api/user/save_course_collection', {
            ...this.productInfo,
            uid: this.userInfo.uid,
            course_id: item.id
          }).then(() => {
            item.is_collection = +!item.is_collection;
            this.$toast.success(item.is_collection ? '收藏成功' : '取消收藏成功');
          }).catch(console.log);
      },
      // 点击跳转
      itemCallBack(item){
        this.$router.push('/classdetail/' + item.id);
      },
      
    }
  }
</script>

<style scoped lang="less">
  .no-bg {
    .tabs {
      padding-top: 0;
    }
    .list {
      padding-top: 3.91rem;
    }
  }

  .tabs {
    padding-top: 5.84rem;
    background: no-repeat top left / 100%;
    .tabs-box {
      background-color: #fff;
      border-radius: .38rem .38rem 0 0;
      .all {
        margin-top: .25rem;
        width: 3.06rem;
        height: 2.5rem;
      }
    }
    .tab-list {
      margin-right: 3.06rem;
    }
  }

  .list {
    padding: 9.75rem 1.25rem 0;
    .item {
      margin-bottom: 1.25rem;
      width: 9.88rem;
      color: #999;
      font-size: .69rem;
      line-height: 1;
      .bigimg {
        margin-bottom: .72rem;
        height: 5.56rem;
        border-radius: .38rem;
      }
      .title {
        margin-bottom: .75rem;
        font-size: .88rem;
        line-height: 1.5;
        color: #333;
      }
      .eye {
        margin-top: .05rem;
        width: .84rem;
      }
    }
  }

  .sheet {
    padding: 1.47rem 0 0;
    .sheet-title {
      padding-bottom: 1.45rem;
      font-size: 1.13rem;
      line-height: 1;
      color: #666;
      background-color: #fff;
    }
    .c-list {
      margin: 0 .88rem;
      padding-top: 2.56rem;
      max-height: 45vh;
    }
    .c-item {
      margin: 0 0 1rem .5rem;
      padding: 0 1rem;
      font-size: .88rem;
      color: #328eff;
      line-height: 2rem;
      background-color: #ebf4ff;
      border-radius: 1rem;
      &.active {
        background-color: #328eff;
        color: #fff;
      }
    }
  }
  .list-inner {
    padding: 1rem;
  }
  .course-card {
    + .course-card {
      margin-top: 1rem;
    }
  }
  .loading{
    display: inline-block;
    padding: 1rem 0.5rem 1rem ;
  }
</style>
